<template>
  <div class="marketing-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">📢 会员营销活动</span>
          <el-button type="primary" @click="handleCreate">
            <el-icon><Plus /></el-icon>
            创建活动
          </el-button>
        </div>
      </template>

      <!-- 活动列表 -->
      <el-table :data="activityList" border stripe>
        <el-table-column prop="name" label="活动名称" width="200" />
        <el-table-column prop="type" label="活动类型" width="120">
          <template #default="{ row }">
            {{ getTypeName(row.type) }}
          </template>
        </el-table-column>
        <el-table-column prop="target" label="目标人群" width="150">
          <template #default="{ row }">
            <el-tag size="small">{{ row.target }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="period" label="活动时间" width="220">
          <template #default="{ row }">
            {{ row.startTime }} 至 {{ row.endTime }}
          </template>
        </el-table-column>
        <el-table-column prop="participantCount" label="参与人数" width="100" />
        <el-table-column prop="conversionRate" label="转化率" width="100">
          <template #default="{ row }">
            <span :style="{ color: row.conversionRate > 50 ? '#67c23a' : '#e6a23c' }">
              {{ row.conversionRate }}%
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusTag(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleView(row)">详情</el-button>
            <el-button link type="success" @click="handleEdit(row)">编辑</el-button>
            <el-button link type="info" @click="handleStats(row)">数据</el-button>
            <el-button link type="danger" @click="handleStop(row)">结束</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 创建活动对话框 -->
    <el-dialog v-model="createDialogVisible" title="创建营销活动" width="800px">
      <el-steps :active="currentStep" align-center style="margin-bottom: 30px;">
        <el-step title="基本信息" />
        <el-step title="目标设置" />
        <el-step title="活动内容" />
        <el-step title="发送设置" />
      </el-steps>

      <!-- 步骤1: 基本信息 -->
      <el-form v-show="currentStep === 0" :model="activityForm" label-width="100px">
        <el-form-item label="活动名称">
          <el-input v-model="activityForm.name" />
        </el-form-item>
        <el-form-item label="活动类型">
          <el-select v-model="activityForm.type">
            <el-option label="促销活动" value="promotion" />
            <el-option label="积分活动" value="points" />
            <el-option label="储值活动" value="recharge" />
            <el-option label="新品推荐" value="newproduct" />
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-date-picker
            v-model="activityForm.timeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD HH:mm"
          />
        </el-form-item>
      </el-form>

      <!-- 步骤2: 目标设置 -->
      <el-form v-show="currentStep === 1" :model="activityForm" label-width="100px">
        <el-form-item label="目标人群">
          <el-radio-group v-model="activityForm.targetType">
            <el-radio label="all">全部会员</el-radio>
            <el-radio label="level">按等级</el-radio>
            <el-radio label="group">按分组</el-radio>
            <el-radio label="tag">按标签</el-radio>
            <el-radio label="custom">自定义</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="选择等级" v-if="activityForm.targetType === 'level'">
          <el-checkbox-group v-model="activityForm.targetLevels">
            <el-checkbox label="normal">普通会员</el-checkbox>
            <el-checkbox label="silver">银卡会员</el-checkbox>
            <el-checkbox label="gold">金卡会员</el-checkbox>
            <el-checkbox label="diamond">钻石会员</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="预计人数">
          <el-tag type="info" size="large">约 {{ estimatedCount }} 人</el-tag>
        </el-form-item>
      </el-form>

      <!-- 步骤3: 活动内容 -->
      <el-form v-show="currentStep === 2" :model="activityForm" label-width="100px">
        <el-form-item label="活动标题">
          <el-input v-model="activityForm.title" />
        </el-form-item>
        <el-form-item label="活动内容">
          <el-input v-model="activityForm.content" type="textarea" :rows="5" />
        </el-form-item>
        <el-form-item label="活动海报">
          <el-input v-model="activityForm.poster" placeholder="海报图片URL" />
        </el-form-item>
      </el-form>

      <!-- 步骤4: 发送设置 -->
      <el-form v-show="currentStep === 3" :model="activityForm" label-width="100px">
        <el-form-item label="发送方式">
          <el-checkbox-group v-model="activityForm.sendChannels">
            <el-checkbox label="sms">短信</el-checkbox>
            <el-checkbox label="wechat">微信</el-checkbox>
            <el-checkbox label="app">APP推送</el-checkbox>
            <el-checkbox label="email">邮件</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="发送时间">
          <el-radio-group v-model="activityForm.sendType">
            <el-radio label="now">立即发送</el-radio>
            <el-radio label="scheduled">定时发送</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="定时时间" v-if="activityForm.sendType === 'scheduled'">
          <el-date-picker
            v-model="activityForm.scheduledTime"
            type="datetime"
            placeholder="选择发送时间"
            value-format="YYYY-MM-DD HH:mm"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button v-if="currentStep > 0" @click="currentStep--">上一步</el-button>
        <el-button @click="createDialogVisible = false">取消</el-button>
        <el-button v-if="currentStep < 3" type="primary" @click="currentStep++">下一步</el-button>
        <el-button v-else type="primary" @click="handleCreateSubmit">创建并发送</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const activityList = ref([
  {
    name: '双十一大促', type: 'promotion', target: '全部会员',
    startTime: '2024-11-11 00:00', endTime: '2024-11-11 23:59',
    participantCount: 8956, conversionRate: 35.5, status: 'ended'
  },
  {
    name: 'VIP专享折扣', type: 'promotion', target: 'VIP会员',
    startTime: '2024-01-01 00:00', endTime: '2024-01-31 23:59',
    participantCount: 1234, conversionRate: 62.3, status: 'ongoing'
  },
  {
    name: '充值送好礼', type: 'recharge', target: '全部会员',
    startTime: '2024-01-15 00:00', endTime: '2024-01-31 23:59',
    participantCount: 567, conversionRate: 28.7, status: 'ongoing'
  }
])

const createDialogVisible = ref(false)
const currentStep = ref(0)
const estimatedCount = ref(12345)

const activityForm = reactive({
  name: '',
  type: 'promotion',
  timeRange: [],
  targetType: 'all',
  targetLevels: [],
  title: '',
  content: '',
  poster: '',
  sendChannels: ['wechat'],
  sendType: 'now',
  scheduledTime: ''
})

const getTypeName = (type) => {
  const map = {
    promotion: '促销活动',
    points: '积分活动',
    recharge: '储值活动',
    newproduct: '新品推荐'
  }
  return map[type] || type
}

const getStatusTag = (status) => {
  const map = { draft: 'info', ongoing: 'primary', ended: 'success' }
  return map[status] || 'info'
}

const getStatusText = (status) => {
  const map = { draft: '草稿', ongoing: '进行中', ended: '已结束' }
  return map[status] || status
}

const handleCreate = () => {
  currentStep.value = 0
  createDialogVisible.value = true
}

const handleView = () => {
  ElMessage.info('查看活动详情')
}

const handleEdit = () => {
  ElMessage.info('编辑活动')
}

const handleStats = () => {
  ElMessage.info('查看数据统计')
}

const handleStop = () => {
  ElMessage.success('活动已结束')
}

const handleCreateSubmit = () => {
  ElMessage.success('活动创建成功，正在发送...')
  createDialogVisible.value = false
}
</script>

<style scoped>
.marketing-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}
</style>

